<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue-列表|form 表单控件绑定</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>

    <!-- 基于v-model对input表单绑定，实现状态实时监控 -->
    <form id="app-1">
        <input v-model="msg" placeholder="输入内容">
        <p>输入的内容是:{{ msg}}</p>

        <!-- 多行文本的例子 -->
        <p>多行文本的例子:</p>
        <p style="white-space:pre">{{mutiMsg}}</p>
        <br>
        <textarea v-model="mutiMsg" placeholder="输入多行文字"></textarea>
        <br>
        <!-- 复选框选中,单个的例子，判断是否选中-->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">是否选中:{{checked}}</label>
        <br>
        <!-- 多个勾选框的例子 -->
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="jack">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="jack">Mike</label>
        <br>
        <span>选中的姓名:{{ checkedNames }}</span>
        <!-- 单选按钮 -->
        <br>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>选中的是: {{ picked }}</span>
        <!-- 选择列表|单选 -->
        <br>
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>选中的是: {{ selected }}</span>

        <!-- 选择列表|多选 -->
        <br>
        <select v-model="mutiSelected" multiple style="width: 50px">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>选中的是: {{ mutiSelected }}</span>

        <!-- 选择列表|动态列表 -->
        <br>
        <select v-model="dymanicSelected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ dymanicSelected }}</span>

        <!-- 将form表单的value绑定到vue实例的一个动态属性上面 -->
        <br>
        <div>
            <input type="checkbox" v-model="toggle" 
            v-bind:true-value="a"
            v-bind:false-value="b">
            <span>checked: {{ toggle }}</span>
            <br>
            <input type="radio" v-model="bindPick" v-bind:value="a">
            <span>picked: {{ bindPick }}</span>
        </div>

        <!-- v-model 修饰符-->
        <br>
        <!-- 在 "change" 而不是 "input" 事件中更新 -->
        <input v-model.lazy="lazyMsg">
        <p>延迟绑定:{{lazyMsg}}</p>
        <!-- 自动转换为数字，转换失败则返回原值-->
        <input v-model.number="age" type="number">
        <!-- trim 方法-->
        <input v-model.trim="msg">

    </form>

</body>
<script>
   var app1 = new Vue({
       el:'#app-1',
       data () {
           return {
               msg:'',
               mutiMsg:'',
               checked:false,
               checkedNames:[],
               picked:'', // 默认不选中
               selected:null,
               mutiSelected:[],
               dymanicSelected:'A',
               options:[
                   { text:'One',value:'A'},
                   { text:'Two',value:'B'},
                   { text:'Three',value:'C'},
               ],
               toggle:null,
               bindPick:null,
               a:'A value',
               b:'B value',
               lazyText:'',
               lazyMsg:'',
               age:18
           }
       }
   })

</script>

</html>